<template>
  <div class="container">
    <div class="echarts" ref="echarts">
    </div>
  </div>
</template>

<script>
export default {
  name: "echartsModel",
  data() {
    return {
      chartInstance: null,
      data: null
    }
  },
  mounted() {
    this.initChartInstance()
    this.getData()
    window.addEventListener("resize",this.screenAdapter)
    this.screenAdapter()
  },
  destroyed() {
    window.removeEventListener('resize', this.screenAdapter)
  },
  methods: {
    initChartInstance() {
      this.chartInstance = this.$echarts.init(this.$refs.echarts)
      const initOption = {}
      this.chartInstance.setOption(initOption)
    },
    async getData() {
      // 获取服务器的数据，对this.data 进行赋值之后，调用updateChart方法更新图表

      this.updateChart()
    },
    updateChart() {
      // 处理图表需要的数据

      const dataOption = {}
      this.chartInstance.setOption(dataOption)
    },
    screenAdapter() {
      // 自适应分辨率

      const adapterOption = {}
      this.chartInstance.setOption(adapterOption)
      this.chartInstance.resize()

    }
  }
}
</script>

<style scoped>
.echarts {
  height: 800px;
  width: 100%;
}
</style>
